<template>
  <div class="body">
    <!-- 头部 -->
    <van-nav-bar
      title="城市列表"
      left-arrow
      @click-left="$router.go(-1)"
      :placeholder="true"
      :z-index="999"
    />
    <!-- 轮播图-->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      height="250"
      :loop="false"
    >
      <van-swipe-item v-for="(item, index) in det.houseImg" :key="index">
        <van-image
          width="100%"
          height="100%"
          :src="'http://liufusong.top:8080' + item"
        />
      </van-swipe-item>
    </van-swipe>
    <!-- 标题 -->
    <div class="conent">
      <p class="biaoti">{{ det.title }}</p>
      <!-- 标签 -->
      <div class="biaoqian">
        <van-tag v-for="(item, index) in det.tags" :key="index">{{
          item
        }}</van-tag>
      </div>
      <!-- 详情 -->
      <div class="xiangqing">
        <p>
          <span>{{ det.price }}<b>/月</b></span>
          <i>租金</i>
        </p>
        <p>
          <span>{{ det.roomType }}</span>
          <i>房型</i>
        </p>
        <p>
          <span>{{ det.size }}<b>平米</b></span>
          <i>面积</i>
        </p>
      </div>
      <!-- 介绍 -->
      <div class="jieshao">
        <p><span>装修:</span>普通</p>
        <p><span>朝向:</span>{{ det.oriented[0] }}</p>
        <p><span>楼层:</span>{{ det.floor }}</p>
        <p><span>类型:</span>普通</p>
      </div>
    </div>
    <!-- 房屋配套 -->
    <div class="pei">
      <p class="xiaoqu"><span>小区：</span>{{ det.community }}</p>
      <div class="pic" id="container"></div>
      <h4>房屋配套</h4>
      <div class="icon">
        <p v-for="(item, index) in det.supporting" :key="index">
          <span>图标</span>
          <i>{{ item }}</i>
        </p>
      </div>
    </div>
    <!-- 房屋概括 -->
    <div class="fygk">
      <h4>房源概括</h4>
      <div></div>
      <div class="description">{{ det.description }}</div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="cnxh">
      <h4>猜你喜欢</h4>
    </div>
    <!-- 底部按钮 -->
    <van-row>
      <van-col span="8"
        ><van-button type="default" icon="star-o">收藏</van-button></van-col
      >
      <van-col span="8"
        ><van-button type="default">在线咨询</van-button></van-col
      >
      <van-col span="8"
        ><van-button type="primary">电话咨询</van-button></van-col
      >
    </van-row>
  </div>
</template>

<script>
// import { dt } from '@/api/chengshi'
import '@/styles/details.less'
import axios from 'axios'
export default {
  name: 'details-page',
  components: {},
  props: {},
  data() {
    return {
      det: {}
    }
  },
  computed: {},
  watch: {},
  async created() {
    // console.log(this.$route.params.id)
    const res = await axios({
      url: `http://liufusong.top:8080/houses/${this.$route.params.id}`
    })
    console.log(res)
    this.det = res.data.body
  },
  methods: {}
}
</script>

<style scoped lang="less">
.body {
  background-color: #cfcece !important;
}
// 头部
::v-deep .van-nav-bar__content {
  background: rgb(23, 160, 10);
  z-index: 999999 !important;
  .van-nav-bar__title {
    color: rgb(255, 255, 255) !important;
  }
  .van-icon-arrow-left:before {
    color: rgb(255, 255, 255) !important;
  }
}
// 轮播
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

// ------------------
.description {
  text-indent: 2rem;
  padding: 10px;
}
// 按钮
.van-row {
  position: fixed;
  bottom: 0px;
  width: 100%;
  background: rgb(188, 184, 184);
  .van-button {
    width: 100%;
    height: 60px;
    font-size: 18px;
  }
}
</style>
